<template>
  <a-tabs type="card" @change="onTabChange">
    <a-tab-pane key="1" tab="子模块" v-if="showModuleTab">
      <module-table />
    </a-tab-pane>
    <a-tab-pane key="2" tab="拓扑">
      <topo-view />
    </a-tab-pane>
    <a-tab-pane key="3" tab="规则" v-if="showRuleTab">
      <report-rule-table />
    </a-tab-pane>
    <a-tab-pane key="4" tab="事件" v-if="showRuleTab">
      <event-table />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
  import { TabPane, Tabs } from 'ant-design-vue'
  import { useModuleStoreWithOut } from '/@/store/modules/module'
  import ModuleTable from '/@/views/environment/module/ModuleTable.vue'
  import ReportRuleTable from '/@/views/environment/report/ReportRuleTable.vue'
  import TopoView from '/@/views/environment/topo/TopoView.vue'
  import EventTable from '/@/views/environment/event/EventTable.vue'

  export default {
    components: {
      'a-tabs': Tabs,
      'a-tab-pane': TabPane,
      'module-table': ModuleTable,
      'topo-view': TopoView,
      'report-rule-table': ReportRuleTable,
      'event-table': EventTable,
    },
    data() {
      return {
        store: useModuleStoreWithOut(),
        showModuleTab: true,
        showRuleTab: true,
      }
    },
    watch: {
      'store.parent': {
        handler() {
          if (this.store.getParent.type === 'system') {
            this.showModuleTab = true
          } else {
            this.showModuleTab = false
          }

          if (this.store.getParent.parent === 0) {
            this.showRuleTab = true
          } else {
            this.showRuleTab = false
          }
        },
      },
    },
    methods: {
      onTabChange(activeKey) {
        console.log('###:', activeKey)
      },
    },
  }
</script>
